<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>结算</title>
    <link rel="stylesheet" href="/css/style.css">
    <script>
        function validateCheckoutForm() {
            var name = document.getElementById('customerName').value.trim();
            var phone = document.getElementById('customerPhone').value.trim();
            var address = document.getElementById('address').value.trim();
            var phoneRegex = /^1[3-9]\d{9}$/;
            if (name.length < 2) {
                alert('请输入有效的姓名');
                return false;
            }
            if (!phoneRegex.test(phone)) {
                alert('请输入有效的手机号码');
                return false;
            }
            if (address.length < 5) {
                alert('请输入详细的配送地址');
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<div class="container">
    <h1>结算</h1>
    <c:if test="${not empty error}">
        <div style="color:red;text-align:center;margin-bottom:10px;">${error}</div>
    </c:if>
    <div style="width:100%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.05);padding:16px 0 8px 0;display:flex;justify-content:flex-end;align-items:center;position:sticky;top:0;z-index:10;">
        <a href="/cart" class="order-btn" style="margin-right:20px;width:auto;padding:6px 18px;">返回购物车</a>
        <a href="/logout" class="order-btn" style="margin-right:40px;width:auto;padding:6px 18px;background:#e44d26;">退出登录</a>
    </div>
    <table style="width:100%;background:white;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);">
        <thead>
        <tr>
            <th>菜品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${cart}" var="item">
            <tr>
                <td>${item.dishName}</td>
                <td>￥${item.price}</td>
                <td>${item.quantity}</td>
                <td>￥${item.price * item.quantity}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div style="margin:20px 0;text-align:right;font-size:1.2em;">
        总计：<span style="color:#e44d26;">￥${total}</span>
    </div>
    <form action="/cart/checkout" method="post" onsubmit="return validateCheckoutForm();">
        <div class="form-group">
            <label for="customerName">姓名：</label>
            <input type="text" id="customerName" name="customerName" required>
        </div>
        <div class="form-group">
            <label for="customerPhone">电话：</label>
            <input type="tel" id="customerPhone" name="customerPhone" required>
        </div>
        <div class="form-group">
            <label for="address">地址：</label>
            <textarea id="address" name="address" required></textarea>
        </div>
        <div class="form-group">
            <label>支付方式：</label>
            <select name="payType" required>
                <option value="ALIPAY">支付宝</option>
                <option value="WECHAT">微信支付</option>
                <option value="CASH">现金</option>
            </select>
        </div>
        <button type="submit" class="order-btn">模拟支付并提交订单</button>
    </form>
</div>
</body>
</html> 